<template>
  <el-dialog
    v-model="visible"
    :before-close="hangleCloseEditDialog"
    :close-on-click-modal="false"
    width="30%"
    top="40vh"
    center
  >
    <div class="myDialog">
      <div class="content">
        <el-form :model="form" :rules="rules" ref="formRef">
          <el-form-item label="原始密码" prop="originalPwd">
            <el-input
              type="password"
              v-model="form.originalPwd"
              placeholder="请输入原密码"
            />
          </el-form-item>

          <el-form-item label="新的密码" prop="newPwd">
            <el-input
              type="password"
              v-model="form.newPwd"
              placeholder="不少于8位，大小写字母，数字和特殊字符"
            />
          </el-form-item>

          <el-form-item label="确认密码" prop="confirmPwd">
            <el-input
              type="password"
              v-model="form.confirmPwd"
              placeholder="请再次输入密码"
            />
          </el-form-item>
        </el-form>
      </div>

      <div class="dialog-footer">
        <el-button @click="hangleCloseEditDialog">取消</el-button>
        <el-button type="primary" @click="confirm">确认</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { reactive, ref, computed } from "vue";
import { checkPwd } from "@/utils/check";

import { changePassword } from "@/api/user/index.ts";
import { useRouter } from "vue-router";

const props = defineProps(["editDialogVisible"]);
const emits = defineEmits(["closeEditDialog", "update:editDialogVisible"]);

const visible = computed({
  get: () => props.editDialogVisible,
  set: () => emits("update:editDialogVisible"),
});

const form = reactive({
  originalPwd: "",
  newPwd: "",
  confirmPwd: "",
});

const hangleCloseEditDialog = () => {
  emits("closeEditDialog");
};

const checkConfirmPwd = (rule: any, value: any, callback: any) => {
  if (form.newPwd === form.confirmPwd) {
    callback();
  } else {
    callback(new Error("两次密码不一致"));
  }
};

const rules = reactive<FormRules>({
  originalPwd: [
    {
      required: true,
      message: "请输入原始密码",
      trigger: "blur",
    },
  ],
  newPwd: [
    {
      required: true,
      message: "请输入新的密码",
      trigger: "change",
    },
    {
      validator: checkPwd,
      trigger: "blur",
    },
  ],
  confirmPwd: [
    {
      required: true,
      message: "请再次确认密码",
      trigger: "blur",
    },
    {
      validator: checkConfirmPwd,
      trigger: "blur",
    },
  ],
});

const formRef = ref();

const router = useRouter();

const confirm = async () => {
  await (formRef.value as FormInstance).validate(
    async (valid: boolean, fields) => {
      if (valid) {
        const { data: res } = await changePassword({
          oldPassword: form.originalPwd,
          newPassword: form.newPwd,
        });

        if (res.code === 200) {
          hangleCloseEditDialog();

          ElMessage({
            type: "success",
            message: "修改密码成功",
          });

          window.sessionStorage.clear();
          router.push({
            name: "Login",
          });
        }
      } else {
        console.log(fields);
      }
    }
  );
};
</script>

<style lang="less" scoped>
.myDialog {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 36px;
  padding-bottom: 16px;

  .content {
    width: 100%;
    font-size: 16px;
    // margin-bottom: 20px;
  }

  .dialog-footer {
    width: 60%;
    text-align: center;

    :deep(.el-button) {
      width: 40%;
    }

    :deep(.el-button + .el-button) {
      margin-left: 20px;
    }
  }
}
</style>
